<template>
  <div class="workbench-button">
    <el-icon class="icon"><component :is="iconComponent" /></el-icon>
    <span class="text">工作台</span>
    <el-icon class="close-icon" @click="handleClose"><Close /></el-icon>
  </div>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue'
import { computed } from 'vue'

const iconComponent = computed(() => {
  // 根据实际需要选择合适的图标组件
  return 'Folder'
})

function handleClose() {
  // 处理关闭逻辑
  console.log('Close button clicked')
}
</script>

<style lang="scss" scoped>
.workbench-button {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;

  .icon {
    margin-right: 8px;
    color: #409eff;
  }

  .text {
    font-size: 16px;
    color: #303133;
  }

  .close-icon {
    margin-left: auto;
    color: #c0c4cc;
    transition: color 0.3s;

    &:hover {
      color: #909399;
    }
  }
}
</style>